セルを連結させる
今週は、ホームページ作成の初心者を対象にホームページの基本を紹介します。テーマは「セルを連結させる」です。「TABLE」タグを使って表を作成するときに、行や列によってセル(マス)の数を変更させたい場合もあるでしょう。このような場合はセルの連結を行います。

→ 横方向にセルを連結させる
 
横方向にセルを連結させる場合は、「TD」タグ(または「TH」タグ)にcolspan属性を追加し、連結させるセルの数を属性値として指定します。たとえば、横に3マス分だけセルを連結させる場合は、「colspan="3"」と記述します。なお、セルを連結させた行は、そのぶんだけ「TD」および「TH」タグを少なく記述する必要があります。つまり、5列の表で3マス分のセル連結を行った場合なら、3+1+1で合計3つの「TD」「TH」タグを記述し、表の列数の整合性を合わせておきます。
<HTML>
<HEAD>
  <TITLE>初めてのホームページ作成</TITLE>
</HEAD>

<BODY>
セルを連結した表の例<BR>
<BR>
<BR>
■送料の一覧
<TABLE border="2">
  <TR>
    <TH></TH>
    <TH>A地域</TH>
    <TH>B地域</TH>
    <TH>C地域</TH>
    <TH>D地域</TH>
  </TR>
  <TR>
    <TH>〜5kg</TH>
    <TD>360円</TD>
    <TD>420円</TD>
    <TD>480円</TD>
    <TD>540円</TD>
  </TR>
  <TR>
    <TH>〜10kg</TH>
    <TD>520円</TD>
    <TD>600円</TD>
    <TD>680円</TD>
    <TD>760円</TD>
  </TR>
  <TR>
    <TH>〜20kg</TH>
    <TD colspan="3">1200円</TD>
    <TD>1600円</TD>
  </TR>
</TABLE>

</BODY>

</HTML>


→ 縦方向にセルを連結させる
 
縦方向にセルを連結させる場合は、rowspan属性を使って連結させるセルの数を指定します。たとえば、縦に2マス分だけセルを連結させる場合は、「rowspan="2"」と記述すればよいわけです。なお、この場合も表の行数/列数の整合性がとれるように「TD」「TH」タグの数を調整する必要があります。
<HTML>
<HEAD>
  <TITLE>初めてのホームページ作成</TITLE>
</HEAD>

<BODY>
セルを連結した表の例<BR>
<BR>
<BR>
■送料の一覧
<TABLE border="2">
  <TR>
    <TH></TH>
    <TH>A地域</TH>
    <TH>B地域</TH>
    <TH>C地域</TH>
    <TH>D地域</TH>
  </TR>
  <TR>
    <TH>〜5kg</TH>
    <TD>360円</TD>
    <TD rowspan="2">無料</TD>
    <TD>480円</TD>
    <TD>540円</TD>
  </TR>
  <TR>
    <TH>〜10kg</TH>
    <TD>520円</TD>
    <TD>680円</TD>
    <TD>760円</TD>
  </TR>
  <TR>
    <TH>〜20kg</TH>
    <TD>1200円</TD>
    <TD>1300円</TD>
    <TD>1400円</TD>
    <TD>1600円</TD>
  </TR>
</TABLE>

</BODY>

</HTML>


→ 見出しの作成
 
表では、1行目や1列目を“見出し”として扱う場合も多くあります。見出しとするセル(マス)は、「TD」〜「/TD」タグの代わりに「TH」〜「/TH」タグを使用するとよいでしょう。「TH」〜「/TH」タグのセルは、そのセル内の文字が太字、中央揃えで表示されます。
<HTML>
<HEAD>
  <TITLE>初めてのホームページ作成</TITLE>
</HEAD>

<BODY>
セルを連結した表の例
<BR>
<BR>
■送料の一覧
<TABLE border="2">
  <TR>
    <TH></TH>
    <TH>A地域</TH>
    <TH>B地域</TH>
    <TH>C地域</TH>
    <TH>D地域</TH>
  </TR>
  <TR>
    <TH>〜5kg</TH>
    <TD colspan="2" rowspan="2">無料</TD>
    <TD>480円</TD>
    <TD>540円</TD>
  </TR>
  <TR>
    <TH>〜10kg</TH>
    <TD>680円</TD>
    <TD>760円</TD>
  </TR>
  <TR>
    <TH>〜20kg</TH>
    <TD>1200円</TD>
    <TD>1300円</TD>
    <TD>1400円</TD>
    <TD>1600円</TD>
  </TR>
</TABLE>

</BODY>

</HTML>


e[NECir Yahoo yV LINEf[^[z500~`I
z[y[W NWbgJ[h COiq@COsI COze